<!--
* @FileDescription: 图表下缩略甘特图组件
* @Author: yuec621@outlook.com
* @Date: 2024-11-3 12:26:37
* @LastEditors: Please set LastEditors
* @LastEditTime: 2024-12-30 12:26:37
-->
<template>
    <div class="ganteBox">
        <el-row :gutter="24">
            <el-col :span="siftBtn==-1?21:24" style="position: relative;">
                <span v-if="ganteList.length>0" style="left: 14px;top: 44%;position: absolute;z-index: 1;
                transform: translateY(-50%);font-size: 14px;color: rgba(62, 70, 79, 1);">
                    {{timeRange[0]}}</span>
                <div id="ganteChart" style="width: 100%;height: 24px;
                margin: 0 4px;border-radius: 4px;">
                </div>
                <span v-if="ganteList.length>0" style="right: 0%;top: 44%;position: absolute;z-index: 1;
                transform: translateY(-50%);font-size: 14px;color: rgba(62, 70, 79, 1);">
                    {{timeRange[1]}}</span>
            </el-col>
            <el-col :span="3" v-if="ganteList.length>0 && siftBtn==-1">
                <div class="btnList">
                    <span v-for="item in state.typeList" :style="{backgroundColor:item.bg}">{{ item.name }}</span>
                </div>
            </el-col>
        </el-row>
    </div>
</template>
<script setup>
    import {
        computed,
        nextTick,
        reactive,
        watchEffect
    } from 'vue';
    import axios from "@/utils/request"
    import * as echarts from 'echarts'
    import dayjs from 'dayjs'
    import useUserStore from "@/store/modules/user";
    const emits = defineEmits(['ganteChange'])
    const {
        proxy
    } = getCurrentInstance();
    const userStore = useUserStore();
    const props = defineProps({
        ganteList: {
            type: Array,
            default: () => {
                return []
            }
        },
        timeRange: {
            type: Array,
            default: () => {
                return []
            }
        },
        siftBtn: {
            type: Number,
            default: () => {
                return -1
            }
        }
    })
    // 重点
    const state = reactive({
        typeList: [{
            name: '报警',
            type: 0,
            bg: 'rgba(237, 190, 36, 1)'
        }, {
            name: '断电',
            type: 1,
            bg: 'rgba(245, 108, 108, 1)'
        }, {
            name: '馈电异常',
            type: 2,
            bg: 'rgba(238, 102, 187, 1)'
        }]
    })
    let ganteChart

    function setC2(arrr) {
        let dataList = []
        if (arrr) {
            dataList = arrr
        }
        let fontcol = "#00000087";
        let this_ = {};
        this_.colmap = {
            0: "rgba(237, 190, 36, 1)",
            1: "rgba(245, 108, 108, 1)",
            2: "rgba(238, 102, 187, 1)",
            // 正常: "#a3abad",
        };
        let startTimeunix;
        if (dataList.length > 0) {
            startTimeunix = dayjs(dataList[0].errorStartTime).valueOf() //年月日时分秒转化成时间戳
        }
        dataList.forEach(item => {
            item.name = item.typeValue
            item.value = [item.typeValue, dayjs(item.errorStartTime).valueOf(), dayjs(item.errorEndTime)
                .valueOf()
            ]
        })
        // this_.startTime = 1620576000000;
        this_.startTime = startTimeunix
        if (props.siftBtn == -1) {
            this_.categories = [0, 1, 2];
        } else {
            this_.categories = [0]
        }
        this_.dataE = dataList
        for (var i = 0; i < this_.dataE.length; i++) {
            this_.dataE[i].itemStyle = {
                normal: {
                    color: props.siftBtn == 0 ? 'rgba(237, 190, 36, 1)' : props.siftBtn == 1 ?
                        'rgba(245, 108, 108, 1)' : props.siftBtn == 2 ? 'rgba(238, 102, 187, 1)' : this_.colmap[
                            this_.dataE[i].name],
                },
            };
        }

        let renderItem = function (params, api) {
            var categoryIndex = api.value(0);
            var start = api.coord([api.value(1), categoryIndex]);
            var end = api.coord([api.value(2), categoryIndex]);
            var height = api.size([0, 1])[1] * 0.6;
            var rectShape = echarts.graphic.clipRectByRect({
                x: start[0],
                y: start[1] - height / 2,
                width: end[0] - start[0],
                height: height,
                borderRadius: [10, 10, 0, 0]
            }, {
                x: params.coordSys.x,
                y: params.coordSys.y,
                width: params.coordSys.width,
                height: params.coordSys.height,
            });
            // 矩形状态图甘特图圆角
            if (rectShape) {
                rectShape.r = [height]
            }
            return (
                rectShape && {
                    type: "rect",
                    transition: ["shape"],
                    shape: rectShape,
                    style: api.style(),
                    transition: 'shape',
                }
            );
        };
        this_.renderItem = renderItem;
        let option = {
            backgroundColor: 'rgba(228, 233, 240, 1)',
            tooltip: {
                formatter: function (params) {
                    if (params.value && params.value.length >= 4) {
                        return (
                            params.marker +
                            this_.categories[params.value[0]] +
                            ":" +
                            params.name +
                            "-" +
                            params.value[3]
                        );
                    } else {
                        return "";
                    }
                },
            },
            dataZoom: [{
                    show: dataList.length > 0 ? true : false,
                    height: 24,
                    xAxisIndex: [0],
                    top: -5,
                    // start: 40,
                    // end: 60,
                    handleIcon: "path://M306.1,413c0,2.2-1.8,4-4,4h-59.8c-2.2,0-4-1.8-4-4V200.8c0-2.2,1.8-4,4-4h59.8c2.2,0,4,1.8,4,4V413z",
                    handleSize: "100%",
                    handleStyle: {
                        color: "rgba(68, 136, 255, 1)",
                        borderColor: 'transparent'
                    },
                    textStyle: {
                        color: "rgba(62, 70, 79, 1)",
                    },
                    borderColor: "transparent",
                },
                {
                    type: "inside",
                    show: true,
                    height: 15,
                    start: 1,
                    end: 35,
                },
            ],
            grid: {
                top: 0,
                left: 10,
                right: 10,
                bottom: 0
            },
            xAxis: {
                min: this_.startTime,
                type: "time",
                scale: true,
                axisLabel: {
                    show: false,
                    formatter: function (val) {
                        var da = new Date(Number(val));
                        var s = da.getMonth() + 1 + "-" + da.getDate() + " " + da.getHours();
                        return s;
                    },
                },
                axisLine: {
                    show: false,
                    lineStyle: {
                        color: fontcol,
                    },
                },
                axisPointer: {
                    show: false,
                    label: {
                        formatter: function (params) {
                            let a = parseInt(params.value);
                            return new Date(a).toLocaleString();
                        },
                        color: "black",
                    },
                },
            },
            yAxis: {
                data: this_.categories,
                axisLine: {
                    show: false,
                    lineStyle: {
                        color: fontcol,
                    },
                },
                axisTick: {
                    show: false,
                },
                axisLabel: {
                    show: false,
                }
            },
            series: [{
                type: "custom",
                renderItem: this_.renderItem,
                itemStyle: {
                    opacity: 0.8,
                    borderCap: "round", //线段末端为圆形
                },
                encode: {
                    x: [1, 2],
                    y: 0,
                },
                data: this_.dataE,
            }],
        };
        ganteChart.setOption(option, true)
        if (!isNaN(ganteChart.getModel().option.dataZoom[0].startValue)) {
            let startValueInit = dayjs(ganteChart.getModel().option.dataZoom[0].startValue).format(
                'YYYY-MM-DD HH:mm:ss');
            let endValueInit = dayjs(ganteChart.getModel().option.dataZoom[0].endValue).format('YYYY-MM-DD HH:mm:ss');
            // emits('ganteChange', startValueInit, endValueInit)
        }
        let isZooming = false;
        if (this_.dataE.length > 0) {
            ganteChart.on("datazoom", (params) => {
                isZooming = true

            })
            ganteChart.getZr().on('mouseup', function (event) {
                if (isZooming) {
                    const datazoom = ganteChart.getOption().dataZoom[0] // 用getOption获取改变的值
                    let startzoom = dayjs(datazoom.startValue).format('YYYY-MM-DD HH:mm:ss')
                    let endzoom = dayjs(datazoom.endValue).format('YYYY-MM-DD HH:mm:ss')
                    emits('ganteChange', startzoom, endzoom)
                    // 处理你的逻辑
                    isZooming = false;
                }
            });
        }
    }

    watchEffect(() => {
        if (props.ganteList.length > 0) {
            ganteChart = echarts.init(document.getElementById("ganteChart"));

            setC2(props.ganteList)
        } else {
            nextTick(() => {
                // ganteChart = echarts.init(document.getElementById("ganteChart"));
                // setC2([])
            })
        }
    })
    onMounted(() => {
        window.addEventListener('resize', () => {
            if (ganteChart) {
                ganteChart.resize()
            }
        })
    })
</script>
<style lang="scss" scoped>
    .ganteBox {
        .btnList {
            display: flex;
            align-items: center;
            justify-content: space-between;

            span {
                font-size: 14px;
                border-radius: 2px;
                padding: 2px 6px;
                color: #fff;
                // background: rgba(238, 102, 187, 1);
                white-space: nowrap;
            }
        }
    }
</style>